<template>
  <div>
    <div style="position: relative; background: rgba(255, 255, 255, 1);padding-bottom:4vw">
      <div class="Invit"></div>
      <div class="invit-content">
        <h1 class="invitH1">邀请好友，得兑换券</h1>
        <p class="invitp">邀请好友输入邀请码且关注蓝驴</p>
        <p class="invitp" style="margin-top:12px;">各自免费领取一件礼物</p>
        <h2 class="invitsh2">9999</h2>
        <div class="Invitefriends-div" @click="onInvitation" >复制邀请码</div>
        <div class="wexin">
          <div class="wexina">
            <img src="../../assets/weixin的副本.png" alt="">
            <p>微信好友</p>
          </div>
          <div class="wexinb">
             <img src="../../assets/pengyouquan.png" alt="">
            <p>朋友圈</p>
          </div>
        </div>
      </div>
      <div>
        <div class="Invite-footer">
          <span></span>
          <p>活动细则</p>
          <span> </span>
        </div>
        <div class="invitef">
          1、点击微信好友或者微信朋友圈分享给好友<br>
          2、将邀请码告诉好友<br>
          3、好友通过分享页面输入邀请码并且关注蓝驴生活，即
          可获取商品兑换券，好友也可获得新用户优惠券。<br>
          4、成功邀请一位好友获得一张兑换券，邀请两位即可获得两张兑换券。
        </div>
        <p class="footer">此活动最终解释权归蓝驴生活所有</p>
      </div>
    </div>
    <div class="message" v-if="isShow">请完善酒店信息</div>
  </div>
</template>

<script>
// 邀请好友
export default {
  name: 'Invitefriends',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    onInvitation () {
      if (!this.isShow) {
        this.isShow = !this.isShow
        let _this = this
        setTimeout(function name () {
          _this.isShow = false
        }, 2000)
      }
    }
  },
  created: () => {
    document.title = '邀请好友'
  }
}
</script>

<style lang='scss' scoped>
.Invit {
  width: 100%;
  height: 88.8vw;
  background: url("../../assets/yaoqinhaoyoutou.png");
  background-size: 100vw 88.8vw;
}
.invit-content {
  width: 93vw;
  height: 101vw;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 2.66vw 0px rgba(0, 0, 0, 0.1);
  border-radius: 2.1vw;
  position: absolute;
  top: 46vw;
  left: 3.46vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  .invitH1 {
    font-size: 5vw;
    font-family: SourceHanSansCN-Bold;
    font-weight: bold;
    color: rgba(22, 22, 22, 1);
    margin-top: 8vw;
    margin-bottom: 5.3vw;
  }
  .invitp {
    font-size: 3.7vw;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(22, 22, 22, 1);
  }
 .invitsh2 {
    font-size:11.73vw;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(10,109,255,1);
    margin-top:8vw;
  }
  .Invitefriends-div {
    width:36.8vw;
    height:10.9vw;
    border-radius:5.4vw;
    border:2px solid rgba(10,109,255,1);
    margin-top:5.3vw;
    text-align: center;
    line-height: 10.9vw;
    font-size:4.53vw;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(22,22,22,1);
  }
  .wexin {
    width:100%;
    height:24.5vw;
    display: flex;
    .wexina {
      margin: 2.66vw 33.3vw 0 16.8vw;
      img {
        width: 13vw;
        height: 13vw;
        margin-bottom: 2.66vw;
      }
      p {
        font-size:3.4vw;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
      }
    }
    .wexinb {
      margin-top: 2.66vw ;
      img {
        width: 13vw;
        height: 13vw;
        margin-bottom: 2.66vw;
      }
      p {
        font-size:3.4vw;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
      }
    }
  }
}
.Invite-footer {
  margin-top:63.7vw;
  display: flex;
  height: 8vw;
  justify-content: center;
  align-items: center;
  margin-bottom: 4vw;
  span {
    width:16vw;
    border-bottom: 0.5px solid rgba(238,238,238,1);
    height: 1px;
  }
  p {
    font-size:3.7vw;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(134,134,134,1);
    margin: 0 1.33vw;
  }
 }
 .invitef {
    width:93.3vw;
    height:37.7vw;
    font-size:3.73vw;
    font-weight:400;
    color:rgba(134,134,134,1);
    line-height:6.4vw;
    margin: auto;
 }
 .footer {
  margin: auto;
  width:93vw;
  height:8vw;
  background:rgba(255,255,255,1);
  font-size:2.6vw;
  font-family:SourceHanSansCN-Regular;
  font-weight:400;
  color:rgba(192,192,192,1);
  text-align: center;
  line-height: 8vw;
 }
.message {
  background:rgba(0,0,0,1);
  border-radius:0.53vw;
  opacity:0.8;
  width: 84vw;
  height: 10.4vw;
  text-align: center;
  line-height: 10.4vw;
  font-size: 4.26vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  position: absolute;
  top: 76vw;
  left: 8vw;
  color:rgba(255,255,255,1)
}

</style>
